react ssr 框架next.js开发个人网站心得

最新推荐文章于 2024-12-03 16:10:57 发布

编程浪子Weibozzz

最新推荐文章于 2024-12-03 16:10:57 发布

阅读量4.7k

点赞数

文章标签： next.js react.js

本文链接：https://blog.csdn.net/qq_38920669/article/details/81260018

版权

前言

完全借助于 next.js 开发的个人网站，线上地址 http://www.liuweibo.cn 总结一下开发完成后的心得和使用体会。gtihub源码https://github.com/Weibozzz/next-blog

为什么使用服务器端渲染(SSR)？

网站是要推广的，所以需要更好的 SEO，搜索引擎可以抓取完整页面
访问速度，更快的加载静态页面

网站使用技术

前端：React(16.x) Next.js antd-design fetch Less
后端：node框架koa和mysql （目前前后端分离，这里只负责写接口，和平常的ajax获取接口一样，这里就不开放源码了）
网站目的：业余学习，记录技术文章，学以致用
网站功能
- 发布文章
- 修改文章（增删改查）
- 用户评论

源码剖析

这里就只讲重点了

入口文件`server.js`

这里用的官方提供的express，同时开启gzip压缩

const express = require(@apos;express@apos;)
const next = require(@apos;next@apos;)

const compression = require(@apos;compression@apos;)
const dev = process.env.NODE_ENV !== @apos;production@apos;
const app = next({ dev })
const handle = app.getRequestHandler()
let port= dev?4322:80

app.prepare()
  .then(() => {
    const server = express()

    if (!dev) {
      server.use(compression()) //gzip
    }
    //文章二级页面
    server.get(@apos;/p/:id@apos;, (req, res) => {
      const actualPage = @apos;/detail@apos;
      const queryParams = { id: req.params.id }
      app.render(req, res, actualPage, queryParams)
    })

    server.get(@apos;*@apos;, (req, res) => {
      return handle(req, res)
    })

    server.listen(port, (err) => {
      if (err) throw err
      console.log(@apos;> Ready on http://localhost @apos;+port)
    })
  })
  .catch((ex) => {
    process.exit(1)
  })

page根组件_app.js

用于传递redux数据,store就和普通react用法一样了，还有header和footer可以放在这里,同理还有_err.js用于处理404页面


import App, {Container} from @apos;next/app@apos;
import React from @apos;react@apos;
import {withRouter} from @apos;next/router@apos; // 接入next的router
import withReduxStore from @apos;../lib/with-redux-store@apos; // 接入next的redux
import {Provider} from @apos;react-redux