为什么需要SSR?
SSR: Server side rendering服务端渲染, 指的是页面在服务器端已经生成了完成的html页面结构, 不需要浏览器解析.
单页面富应用, index.html, 刚开始基本没东西.
- 首屏加载速度慢, 刚开始的时候是空白的, index.html下载之后(前端渲染的时候是浏览器来进行的, 可以交给服务端node操作):
- 需要先请求并执行js文件
- 发送ajax
- 获取数据并生成html结构渲染(ssr从浏览器转到Nodejs)
- SEO搜索引擎优化, 初始页面获取不到相应权重信息.
补充概念:
同构应用: 一套既可以在服务端, 又可以在客户端运行的代码.
- 同构是一种ssr的形态, 是现代ssr的一种表现形式
- 当用户发出请求时, 现在服务器通过ssr渲染出首页的内容
- 但是对应的代码同样可以在客户端被执行
- 执行的目的包括事件绑定等, 以及其他页面切换时也可以在客户端被渲染
使用SSR的方式
方式一: 手动搭建SSR框架;
方式二: 使用已经成熟的SSR框架: Next.js (用于react);
- 安装Next.js脚手架:
npm install -g create-next-app - 创建Next.js项目
create-next-app next-demo
创建好的项目目录如下:
- pages下每个文件就是一个页面, 相当于是一个路由映射(next已经帮我们配置好了后端路由)
这里我们手动添加了About页面, 并且在index.js里面提供了跳转.
如果我不想每次都发很多请求去获取页面, 那么我们可以用另一种方式来进行前端渲染, 直接跳转到About页.
-
使用next/link包里面的Link组件, 下图可以看到,我们请求的是同服务器下被打包好的about.js文件.
image.png - webpack-hmr?page=/about更改当前路由进行页面跳转, 根据about进行前端渲染.
// 这里Link只是作为功能来使用, 里面最好添加相应的子元素
<Link href="/about">
<a>关于</a>
</Link>
页面标题
通常我们希望每一个页面都有自己的标题, 而不是什么localhost路径.
- 通过next/head导出的Head组件来完成, 这个组件会被加载到当前页面的head标签中
- 同理, 对应的logo也是这么做
<Head>
<title>wwqwwqwwq</title>
</Head>
共享组件(实际上是个高阶组件)
有时候我们想要不同页面的head和footer是一样的, 但如果没有其他方式, 我们只能每个文件都去添加这么两个组件, 重复代码太多.
-
这里我们在项目顶层进行共享组件抽离.
AppLayout
主页
Index
About
还有另一种方法是将共享组件放在_app.js(框架在这里渲染index)文件中使用
_document.js文件
在这个文件中可以对我们的html文档进行自定义, 官网链接https://www.nextjs.cn/docs/advanced-features/custom-document.
结构解析
- Html组件就是我们在渲染时我们在控制台Elements下看到的html
- Main是我们App中写的所有内容
修改后记得重新yarn dev编译启动一下
相关样式添加
在react中有三种样式, 普通css, module.css, css in js.(笔者个人喜欢使用styled-components)
// 全局
import "../styles/app.css";
// 模块
import styles from '../styles/Home.module.css';
// 生效
<h1 className={styles.title}>Home页面</h1>
// 不生效
<h1 className='title'>测试</h1>
// styled-jsx, 笔者写起来很难受...
<style>{`
p {
color: blue;
text-decoration: underline;
}
`}</style>
- 全局样式可以直接import到_app文件下.
- 模块样式import到相应的文件, 然后通过className绑定到对应的元素上面. 这种方式相当于一个模块, 在哪里使用在哪里绑定才会生效.
-
styled-jsx(用起来像vue): 一种css in js的技术, 在nextjs中默认集成, 会使用的话就不需要单独安装styled-components, 但笔者还是喜欢使用styled-components...
image.png - 使用styled-components: 一般情况对每个页面要单独创建一个文件夹, 这样显得项目比较有条理.
- 这里有个问题需要留意一下, 因为我们通过<Link />来进行跳转的时候属于CSR客户端渲染, 但如果强硬刷新页面的时候属于服务端渲染, 这时候就会有问题了. 这个时候会提示匹配对应的className属性, 因为默认情况下, 服务端不会给类名进行匹配的.
- 但在nextjs中可以通过插件(babel-plugin-styled-components用于styled-components在服务端渲染时正常生效)进行一个特殊的配置, 在babel转化的时候, 对styled js进行正确的转化, 这个属于devDependencies.
- 我们在根目录下创建.babelrc文件(进行babel转化时会读取这个文件, 运行编译时), 改了配置记得重新yarn dev.
{
"presets": [
"next/babel"
],
"plugins": [
"styled-components"
]
}
路由嵌套
之前我们已经知道, 每个文件对应一个路由信息.
所以我们使用的时候, 在对应组件的文件夹下, 再创建对应的组件(/文件夹)即可.
页面跳转中参数的传递
第一种方式: Link标签
当我们点击推荐列表中的某一项时, 我们希望url跳转后, 页面进行同步.
react中我们可以使用/recommend/:id来进行参数传递, 但在nextjs中怎么使用呢?
使用query参数的方式/recomend?id=${item}, 这里我们可以看到, 对应的参数已经传到url里面了.
接下来如何使用呢? 通过next/router导出的useRouter, 截图可以看到这样是成功的.
import { useRouter } from "next/router";
const route = useRouter();
<h2>Recommend: {router.query.id}</h2>
第二种方式: 代码跳转
除了第一种Link标签跳转, 还有另一种代码跳转的方式.
// index.js
import Router from "next/router";
const recommendItemClick = (item) => {
Router.push({
pathname: "/recommend",
query: {
id: item,
},
});
};
<li key={item} onClick={(e) => recommendItemClick(item)}>
推荐数据: id{item}
</li>
// ./recommend/index.js
const router = useRouter();
<h2>Recommend: {router.query.id}</h2>
在页面中发送网络请求(可以在浏览器,也可以在服务器中执行)
这里我们需要注意一点, 不能像在react中在useEffect中发请求然后存到useState中, 因为在服务端渲染时, 在第一次渲染时已经渲染好了.
当我们使用useState再渲染时, 服务端是不会帮我们做的.
如果我们确实想要在页面中请求一些数据, 那网络请求的代码应该放在哪里?
- 我们通过index.js组件Home的getInitialProps属性进行操作, 将其赋值为一个函数, 这个函数会在组件第一次渲染前进行, 可以是一个异步操作.
Home.getInitialProps = async (props) => {
const res = await axios.get({
url: "接口",
});
return {
name: "wwq",
banners: res.data.data.banner.list,
recommends: res.data.data.recommend.list,
};
};
<h2>轮播图数据:</h2>
<ul>
{banners.map((item, index) => {
return <li key={item?.acm}>{item.title}</li>;
})}
</ul>
-
这里我们return的对象在Home组件里头是可以获取到的, 然后我们在postman中进行测试, 可以看到, 对应的数据是成功渲染出来的.
image.png
这里只是简单分享一下react的ssr入门是怎么进行的, 如果有进一步开发需求或进阶需求, 可以移步nextjs官网.
