nextjs13如何进行服务端渲染？

目录

一、创建一个新项目

二、动态获取后端数据进行服务端渲染出现的问题

三、nextjs13如何进行服务端渲染

---

nextjs13是nextjs的一个重大升级，一些原本在next12当中使用的API在nextjs13上使用十分不便。本文将着重介绍在nextjs13及以上版本当中进行服务端渲染的方法。

一、创建一个新项目 

npx create-next-app@latest

或者

pnpm dlx create-next-app@latest

 

项目安装成功后，不可避免的要安装其他依赖进行项目开发。但是，在新项目下安装其他依赖的话，终端会爆出以下错误：

 以上错误可能会导致依赖安装不成功，解决的办法是删除node_modules，然后进行pnpm install(本人是用pnpm进行安装包的管理),然后在进行依赖的安装即可。

二、动态获取后端数据进行服务端渲染出现的问题

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

在我做的很多项目当中都使用axios进行前后端数据交互，几乎都已经形成习惯了。因此，在进行nextjs13项目当中，我也引入了axios安装包进行前后端数据交互，