当结果命中客户端时，Next JS 服务器端渲染如何工作？

Question

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

在_app.js文件中，我实例化 a Context（依次实例化 a 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 在他的博客上有一个很好的解释。

另一方面，让我们看一下这段代码：

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

return ();

这在这里称为副作用，并且正在render. 虽然这适用于普通的 React，但在 StrictMode 中是禁止的，并且会因 Suspense 中断（在正常情况下也可能中断）。所以我们把它移到 a useEffect。

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

请注意，我没有删除页面道具，因为我们不需要。 useEffect仅在客户端上执行，因此此操作的效果将仅在客户端上显示。如果您希望它们出现在第一次渲染中，则必须使用道具来渲染用户名。例子：

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

在上下文挂钩中：

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

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