A-Tione

node.js Next框架的三种渲染方式：客户端渲染、SSG、SSR

前言

next是一款用JS开发的全栈框架，它是基于express框架基础上开发而成，可以用react写客户端，node.js写服务端。一份代码可在前后端同时运行，这在next中称之为同构！

一些next.js框架基础介绍

创建项目：npm init next-app 项目名，项目创建好后next会帮你搭好基础通用的模板，大多常用的api以及写法都能在模板中找到。

自定义head：使用组件可自定义<meta>标签和内容组件导入。</p> <pre><code class="language-javascript">// 文件路径 page/_app.js import Head from "next/head"; import '../styles/globals.scss' export default function App({ Component, pageProps }) { return <> <Head> <title>我的博客 A-Tione }

快速导航：标准写法xxx，在next中通过标签的href链接定位路由可实现预加载路由页面，可使点击跳转无需发送请求。

同构代码：一份代码两端运行，在一处使用console.log调试，可在服务端和客户端页面都显示出log，这样更方便调试。但请注意同构代码时需要使用前后端都存在的对象，比如window、document等客户端才有的对象就无法在服务端log出来。

局部css：因为next是与react配套使用的，我们可用这样写css：