javascript - 结果到达客户端时，Next JS 服务器端渲染如何工作？

Question

我在 NextJS 应用程序中遇到问题。

在 _app.js 文件中，我实例化了一个 Context(它又实例化了一个 State)

在我的页面 ContextTest 中，我声明了一个 getServerSideProps()。

这会从 API 返回一些数据，这些数据会传递给 _app.js 并保存到 Context's state 中。

到目前为止，我已经有了我需要的数据。

然后它转到目标页面组件，该组件读取上下文的状态并设置一个变量。组件成功输出我的变量，格式为

let userName = userState.username ? userState.username : 'Guest' 

当页面加载时，我检查请求中的 HTML，确实我有 userState.username 值。

但是浏览器中显示的 HTML 有 Guest。

有两点需要注意:

1) 服务器端按预期呈现2)该应用程序在该页面的客户端中再次执行(那么为什么我要在应用程序服务器端呈现？)。结果是此页面没有 getServerSideProps() 的结果，因此我的状态为空，并且在控制台中收到警告。3) 浏览器中显示的 HTML 是客户端执行 React 应用程序的结果。 (为什么？)

__app.js

import React, {useContext} from "react";
import {UserContext} from "../lib/Context/UserContext"

export default function RankerApp({Component, pageProps}) {
    const [userState, setUserState] = useContext(UserContext)();
    const [listState, setListState] = useContext(ListContext)();

    if (pageProps.serverContext && pageProps.serverContext.user) {
        setUserState({...userState, ...pageProps.serverContext.user})
    }
    delete pageProps['serverContext'];

    return (
        <ListContext.Provider value={[listState, setListState]}>
            <UserContext.Provider value={[userState, setUserState]}>
                <Component {...pageProps} />
            </UserContext.Provider>
        </ListContext.Provider>
    );
}

页面/contextTest.js

import React, {useContext} from 'react';
import {UserContext} from "../lib/Context/UserContext";
import Link from "next/link";
import UserContextSeeder from "../lib/User/UserContextSeeder";

export default function ContextPage1(props) {

    let [userState, setUserState] = useContext(UserContext);

    const currentLoggedInUserData = userState.loggedInUserId ? userState.users[userState.loggedInUserId] : null;
    const currentLoggedInUserName = currentLoggedInUserData ? currentLoggedInUserData.userName : 'Guest';

    return (
        <div>
            <h1>Page 1</h1>
            <Link href="contextTest2">
                <a>Page 2</a>
            </Link>
            <h1>Current Logged In User: {currentLoggedInUserName}</h1>
        </div>
    );
}

export async function getServerSideProps(context) {
    let userContext = {};
    // await UserContextSeeder(context).then(context => {userContext = context}); commented for simplicty
    userContext = {loggedInUserId: 222, users: {222: {userName: "Jorge"}}; // suppose this is the result 
    return {
        props: {
            serverContext: {
                user: {...userContext}
            }
        },
    }
}

更多上下文:https://github.com/zeit/next.js/discussions/11871

Answer 1

让我们考虑一个 NextJS 没有水合的世界。您已经从服务器构建了 DOM 并将其发送到客户端，客户端显示了 HTML，大家都很高兴。现在 React 必须执行一个 useEffect 来触发 DOM 中的一些变化，但是如果 React 没有 DOM，它会如何比较虚拟 DOM 过程？

因此，即使我们已经在服务器上完成了，我们也需要在客户端上进行水合/渲染过程。服务器端呈现不是我们为浏览器分担一些工作的过程，而是我们确保内容尽早准备好供用户和机器人查看的方式。

Josh Comeau 对 his blog 有很好的解释.

换句话说，让我们看一下这段代码:

if (pageProps.serverContext && pageProps.serverContext.user) {
   setUserState({...userState, ...pageProps.serverContext.user})
}
delete pageProps['serverContext'];

return ();

这里称为 side effect和一个正在 render 中执行的。虽然这适用于普通 React，但它在 StrictMode 中被禁止并且会因 Suspense 而中断(在正常情况下它也会中断)。所以我们将其移至 useEffect。

useEffect(() => {
  if (pageProps.serverContext && pageProps.serverContext.user) {
   setUserState(prevUserState => ({...prevUserState, ...pageProps.serverContext.user}));
  }
}, [])

请注意，我没有删除 page 属性，因为我们不需要。useEffect 仅在客户端执行，因此其效果将仅显示在客户端上。如果你想让它们出现在第一次渲染中，你必须使用 prop 来渲染用户名。示例:

const [userState, setUserState] = useContext(UserContext)(props.serverContext ? props.serverContext.user : null);

在上下文钩子(Hook)中:

const initialState = {
    loggedInUserId: undefined,
    users: {}
}

const userContextUpdater = (initialUser) => {
    let [state, setState] = useState({
      ...initialState,
      users: initialUser || initialStateusers,
    })
    return [state, setState];
}