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

舍我其谁2013666 关注

0.1 2018.07.28 13:27* 字数 1231 阅读 395评论 0喜欢 2

next-blog

项目介绍

利用react服务端框架next.js写的博客，喜欢就给个Star支持一下。
https://github.com/Weibozzz/next-blog
线上地址： http://www.liuweibo.cn
本项目使用next.js经验分享：http://www.liuweibo.cn/p/206

软件架构

软件架构说明
react.js next.js antd mysql node koa2 fetch

网站使用技术

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

安装教程

快速开始
虽然是服务端渲染，但是也要调用接口，所以需要调用后端的接口

进入config文件夹下的env.js的isShow设置为true,这里只是调用了我自己线上的接口，当然你
只能看不能修改接口哦。如果为false则调不到接口，需要自己去写接口。

运行

cnpm i
npm run dev

部署

cnpm i
npm run build
npm start

使用说明

关于演示不能上传图片，不能发表文章或者修改属于正常情况，因为只是为了展示。
关于路看不到发布文章路由和后台管理也属于正常情况，可以修改代码展示路由效果。

网站截图

详情页

http://pd96wjt4m.bkt.clouddn.com/image/common/detail_1536836727000_459470_1536836749510.png
列表页

http://pd96wjt4m.bkt.clouddn.com/image/common/list_1536836639000_822188_1536836780676.png
编辑页面和发布文章，上传图片到七牛云

http://pd96wjt4m.bkt.clouddn.com/image/common/edit_1536836607000_802376_1536836825962.png

网站技术介绍

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

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

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

网站使用技术

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

源码剖析

这里就只讲重点了

入口文件server.js

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

const express = require('express')
const next = require('next')const compression = require('compression')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
let port= dev?4322:80app.prepare().then(() => {const server = express()if (!dev) {server.use(compression()) //gzip}//文章二级页面server.get('/p/:id', (req, res) => {const actualPage = '/detail'const queryParams = { id: req.params.id }app.render(req, res, actualPage, queryParams)})server.get('*', (req, res) => {return handle(req, res)})server.listen(port, (err) => {if (err) throw errconsole.log('> Ready on http://localhost ' port)})}).catch((ex) => {process.exit(1)})

page根组件_app.js

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


import App, {Container} from 'next/app'
import React from 'react'
import {withRouter} from 'next/router' // 接入next的router
import withReduxStore from '../lib/with-redux-store' // 接入next的redux
import {Provider} from 'react-redux'class MyApp extends App {render() {const {Component, pageProps, reduxStore, router: {pathname}} = this.props;return (<Container><Provider store={reduxStore}><Component {...myPageProps}  /></Provider></Container>)}
}export default withReduxStore(withRouter(MyApp))

网站的服务端渲染页面Blog页面

link用于跳转页面，利用as把原本的http://***.com?id=1变为漂亮的 /id/1
head可以嵌套meta标签进行seo
配置不需要seo的组件

import dynamic from 'next/dynamic';//不需要seo
const DynasicTopTipsNoSsr = dynamic(import('../../components/TopTips'),{ssr:false
})import React, {Component} from 'react'
import {connect} from 'react-redux'
import Router from 'next/router'
import 'whatwg-fetch' // 用于fetch请求数据
import Link from 'next/link'; // next的跳转link
import Head from 'next/head'  // next的跳转head可用于seoclass Blog extends Component {render() {return (<div className="Blog"><Head><title>{BLOG_TXT}&raquo;{COMMON_TITLE}</title></Head><MyLayout><Link   as={`/Blog/${current}`} href={`/Blog?id=${current}`}><a onClick={this.onClickPageChange.bind(this)}>{current}</a></Link></MyLayout></div>)}
}
//这里才是重点，getInitialProps方法来请求数据进行渲染，达到服务端渲染的目的
Blog.getInitialProps = async function (context) {const {id = 1} = context.querylet queryStringObj = {type: ALL,num: id,pageNum}let queryTotalString = {type: ALL};const pageBlog = await fetch(getBlogUrl(queryStringObj))const pageBlogData = await pageBlog.json()return {pageBlogData}
}
// 这里根据需要传入redux
const mapStateToProps = state => {const {res, searchData, searchTotalData} = statereturn {res, searchData, searchTotalData};
}
export default connect(mapStateToProps)(Blog)

静态资源

根目录创建static文件夹，这里是强制要求，否则加载不到静态资源

配置antd和主题并且按需加载

主题配置

antd-custom.less

@primary-color: #722ED0;@layout-header-height: 40px;
@border-radius-base: 0px;

styles.less

@import "~antd/dist/antd.less";
@import "./antd-custom.less";

最后统一配置在公共head

<Head><meta charSet="utf-8"/><meta httpEquiv="X-UA-Compatible" content="IE=edge, chrome=1"/><meta name="viewport"content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/><meta name="renderer" content="webkit"/><meta httpEquiv="description" content="刘伟波-天天向上"/><meta name="author" content="刘伟波,liuweibo"/><link rel='stylesheet' href='/_next/static/style.css'/><link rel='stylesheet' type='text/css' href='/static/nprogress.css' /><link rel='shortcut icon' type='image/x-icon' href='/static/favicon.ico' /></Head>

按需加载配置

.babelrc文件

{"presets": ["next/babel"],"plugins": ["transform-decorators-legacy",["import",{"libraryName": "antd","style": "less"}]]
}

next.config.js文件配置

const withLess = require('@zeit/next-less')module.exports =   withLess({lessLoaderOptions: {javascriptEnabled: true,cssModules: true,}}
)

页面css

感觉和vue的scope一样，style的jsx,加了global为全局，否则只在这里生效

render() {return (<Container><Provider store={reduxStore}><Component {...myPageProps}  /></Provider><style jsx global>{`.fl{float: left;
}
.fr{float: right;
}`}</style></Container>)

页面顶部加载进度条

import Router from 'next/router'
import NProgress from 'nprogress'Router.onRouteChangeStart = (url) => {NProgress.start()
}
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

markdown发表文章和代码高亮

使用只需要marked('放入markdown字符串');

import marked from 'marked'
import hljs from 'highlight.js';hljs.configure({tabReplace: '  ',classPrefix: 'hljs-',languages: ['CSS', 'HTML, XML', 'JavaScript', 'PHP', 'Python', 'Stylus', 'TypeScript', 'Markdown']
})
marked.setOptions({highlight: (code) => hljs.highlightAuto(code).value,gfm: true,tables: true,breaks: false,pedantic: false,sanitize: true,smartLists: true,smartypants: false
});

学累了，来个图放松下

[图片上传失败...(image-b0b5dd-1536913267870)]

参与贡献

Fork 本项目
新建 Feat_xxx 分支
提交代码
新建 Pull Request

遗留问题

访问量大的时候要做数据缓存
cdn node查看图片日期
配置图片描述和更改
上传图片高质量暂未支持上传,上传代码改进
上传为刚好1M bug
登陆后支持收藏文章和修改评论
顶部加载滚动条首次没loading
增加koa子模块
评论支持markdown，评论内容过多建议去sf平台

react ssr方法相关推荐

我很懒,什么都没留下系列之教你上手React服务端渲染（React SSR） HMR
技术栈:webpack3.9.1+webpack-dev-server2.9.5+React16.x + express4.x 前言 (好慌!可能是因为我很懒,导致...,然后,好吧,我比较懒,没有然 ...
markdownpad2 html渲染组件出错_「万字长文」一文吃透React SSR服务端同构渲染
写在前面前段时间一直在研究 react ssr技术,然后写了一个完整的 ssr开发骨架.今天写文,主要是把我的研究成果的精华内容整理落地,另外通过再次梳理希望发现更多优化的地方,也希望可以让更多的人 ...
react native text换行_基于React+Koa实现React SSR服务端渲染
React Server-Side Rendering 其实这个概念很早之前就有了解了,出于没有应用场景原因,之前一直都只停留在了解API的层面,未曾去实践.快到周末闲来无事,自己复盘了下之前做的新商 ...
react ssr php,一文吃透 React SSR 服务端渲染和同构原理
全网最完整的 React SSR 同构技术原理解析与实践,从零开始手把手带你打造自己的同构应用开发骨架,帮助大家彻底深入理解服务端渲染及底层实现原理,学完本课程,你也可以打造自己的同构框架. 写在前面 ...
React SSR: 基于 express 自构建 SSR 服务端渲染
React SSR: 基于 express 自构建 SSR 服务端渲染文章目录 React SSR: 基于 express 自构建 SSR 服务端渲染完整代码示例前情提要构建 CSR 项目项 ...
React SSR 服务器端渲染
React SSR 介绍什么是客户端渲染 CSR: Client Side Rendering 服务器端仅返回 JSON 数据,DATA 和 HTML 在客户端进行渲染什么是服务器端渲染 SSR: ...
React SSR - 01 SSR 介绍和快速开始
React SSR 介绍什么是客户端渲染 CSR:Client Side Rendering 数据和 HTML 的拼接是在客户端(浏览器)使用 JavaScript 完成的,服务端只需要返回 JSO ...
大前端时代，如何做好C 端业务下的React SSR？\n
React在中后台业务里已经很好落地了,但对于C端(给用户使用的端,比如PC/H5)业务有其特殊性,对性能要求比较苛刻,且有SEO需求.另外团队层面也希望能够统一技术栈,小伙伴们希望成长,那么如何能够 ...
Next.js---一个轻量级的 React SSR应用框架
Next.js---一个轻量级的 React SSR应用框架为什么要用Next.js Next.js介绍优点创建项目目录结构 Next中的路由如何实现跳转带参跳转路由钩子使用数据请求 ...
react ssr原理
ssr 什么是ssr:server side render,服务端渲染不同于jsp,php等传统服务端渲染(这种情况下,前后端代码是分开的,写了两份) 目前的ssr是基于react vue等前端框架 ...

react ssr方法

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

next-blog

项目介绍

软件架构

网站使用技术

安装教程

使用说明

网站截图

网站技术介绍

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

网站使用技术

源码剖析

学累了，来个图放松下

参与贡献

遗留问题

react ssr方法相关推荐

最新文章

热门文章