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

Question

谁能解释一下Next.js中客户端和服务器端的概念，因为他们在文档中提到过。我所知道的是，Next.js在客户端react上工作，在浏览器和服务器端运行意味着api(后端)。任何帮助都会很感激。由于

From 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)。

在简单的一个相同的页面Ex: pages/home.js加载时，浏览器硬重新加载https://example.com/home加载为服务器端。在/Pages/folder下编写的页面将在导航服务器端呈现。因此，页面的DOM元素将在页面源中可用(在浏览器中查看页面源选项)，这也将被爬虫使用。

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

在Pages中你也可以选择

1. 创建Next.js项目

2. 有两个页面index.js和home.js

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

   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 
   }
   }
   

如果你需要更多的细节，请告诉我，我们可以研究一下。