Question

任何人都可以向我解释他们在文档中提到的 Next.js 中客户端和服务器端的概念。我所知道的是 Next.js 适用于客户端并在浏览器中运行的 react，而服务器端意味着 api（后端）。任何帮助，将不胜感激。谢谢

来自 Next.js 文档：

<块引用>

此函数在服务器端构建时被调用。它不会在客户端调用，因此您甚至可以进行直接的数据库查询。请参阅“技术详情”部分。

 export async function getStaticProps() {
    
      const postsDirectory = path.join(process.cwd(), 'posts')
      const filenames = await fs.readdir(postsDirectory)
    
 }

Answer 1

几个月前我开始编写 NextJS 应用程序，我会尽我所知解释它是否有帮助。

您对客户端和服务器（API）的理解是正确的，但在 NextJS 的情况下，还有另一个客户端和服务器端，因为 NextJS 用于服务器端渲染（SSR）。

在简单的同一个页面中例如：pages/home.js 当加载浏览器时硬重新加载 https://example.com/home 作为服务器端加载。写在 /pages/ 文件夹下的页面将在导航时呈现服务器端。因此页面的 DOM 元素将在页面源（浏览器中的查看页面源选项）中可用，爬虫也会使用。

您可以通过检查窗口的类型是否为 !== 'undefined' 来发现区别，因为窗口代表浏览器是客户端，而浏览器的查看页面源代表服务器端渲染。

在页面中也可以查看

创建 Next.js 项目
有两个页面 index.js 和 home.js

在 home.js 中编写 Home.getInitalProps 方法，类似于 react 组件中的 useEffect 或 componentDidMount 。此处页面不能包含 componentDidMount 或 useEffect，而是必须在 getInitialProps 或其他相关方法中完成渲染之前的所有 API 调用。

 Home.getInitialProps = async (context) => {
  const { req, query, res, asPath, pathname } = context
   if (!req) {
          if (typeof window !== 'undefined') {
    //its server side request happened on 
     }
  } else {

  // its client side call that calls getInitialProps when routing 
        happened Router.push('/home') from index page or inside components 
        rendered from pages/index.js 
  }
 }

如果您需要更多详细信息，请告诉我，我们可以探索并解决。

Next.js 中的客户端和服务器端是什么？

1 个答案: