Next.js
twice

[next] 什麼都做了兩次?

如果用 React 18 ↑,就要隨時記得 StrictMode 的影響。

如果用 Next.js,還要記得 Server 也會多做一次(如果這個行為有 side effect)。

Next.js is a SSR framework

以在 Next.js 中使用 Websocket 來舉例,我要建立一個 Websocket 連線,然後用 jotai 來讓他成為全域 State。

import socketIO from "socket.io-client";
import { atom, useAtom } from "jotai";
 
const webSocket_url = "http://localhost:4000";
ws = socketIO(webSocket_url);
 
export const wsAtom = atom(ws);

這時觀察 Backend Server 端會發現,不管怎麼樣都會起兩次連線,且該連線會隨著 Frontend 的 Process 關閉而結束。

這是因為 Next.js 在 SSR 時就會跑一次了,使用 SSR 框架時就需要多一層思考自己寫的東西在 Server 端及 Client 端的不同。(大部分時間都沒什麼問題,遇到問題時有這個概念你才能馬上警覺到。)

判斷是不是 Server 端可以用if (typeof window !== "undefined") {}

import socketIO, { Socket } from "socket.io-client";
 
import { atom, useAtom } from "jotai";
 
const webSocket_url = "http://localhost:4000";
 
let ws: Socket;
 
if (typeof window !== "undefined") {
  ws = socketIO(webSocket_url);
}
 
export const wsAtom = atom(ws!);

另外也可以考慮 dynamic import 來關掉 SSR:

import dynamic from "next/dynamic";
const noSSR = dynamic(() => import("../../components/noSSR"), {
  ssr: false,
});

建立 Project 之前,是否需要 SSR 也是個思考課題?