當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

react ssr方法

發布時間：2023/12/20 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 react ssr方法小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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}»{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

按需加載配置

.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方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。