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

Question

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

来自 Next.js 文档：

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

 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 元素将在页面源（在浏览器中查看页面源选项）中可用，爬虫也将使用这些元素。

您可以通过检查 window,== 'undefined' 的类型是否找到差异。 因为 window 代表浏览器是客户端，浏览器的视图页面源代表服务器端渲染。

在页面中，您还可以检查

1. 创建 Next.js 工程

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

3. 在 home.js 中编写 Home.getInitalProps 方法，类似于 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 } }

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