Next.js實現(xiàn)react服務器端渲染的方法示例
更新時間：2019年01月06日 11:42:55 作者：mjzhang1993
這篇文章主要介紹了Next.js實現(xiàn)react服務器端渲染的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
說明
實現(xiàn) 路由跳轉、redux
文件版本
- “next”: “^4.2.3”,
- “react”: “^16.2.0”,
- “react-dom”: “^16.2.0”
使用
Next.js 使用文件體統(tǒng)作為API，可以自動進行服務器端渲染和代碼分割
1. 安裝
yarn add next react react-dom
2. package.json 中添加 npm script
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
3. 創(chuàng)建 /pages 文件夾，其中文件會映射為路由
/pages 文件夾是頂級組件文件夾 其中 /pages/index.js 文件會映射文 / 路由，其他文件根據(jù)文件名映射
| 目錄結構 | 映射路由 |
|---|---|
| /pages/index.js | / |
| /pages/about.js | /about |
| /pages/home/index.js | /home |
| /pages/home/about.js | /home/about |
每一個路由js文件都會 export 一個 React 組件，這個組件可以是函數(shù)式的也可以是通過集成 React.Component 得到的類
export default () => <div>this is index page </div>;
4. 創(chuàng)建 /static 文件夾，存放靜態(tài)資源
靜態(tài)資源文件夾文件會映射到 /static/ 路由下，直接通過 http://localhost:3000/static/test.png 訪問
5. 使用內置組件 <head> 定制每個頁面的 head 部分
import Head from 'next/head'; // 引入內置組件
export default () => (
<div>
<Head>
<title>index page</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
</Head>
<div>this is index page</div>
</div>
);
6. 使用內置組件 <Link> 進行路由跳轉
import Link from 'next/link';
export default () => (
<div>
<p>this is home index page</p>
<Link href="/about" rel="external nofollow" rel="external nofollow" >
<a> to about page</a>
</Link>
</div>
);
更多 Link 使用方式
import React, {Component} from 'react';
import Link from 'next/link';
export default class About extends Component {
constructor(props) {
super(props);
}
render() {
// href 值可以是一個對象
const href = {
pathname: '/home',
query: {name: 'test'}
};
return (
<div>
<p>this is about page </p>
<img src="/static/test.png" alt="test"/>
{/* replace 覆蓋歷史跳轉 */}
<Link href={href} replace>
<a>click to home index page</a>
</Link>
</div>
);
}
}
7. 使用內置 router 方法，手動觸發(fā)路由跳轉
next/router 提供一套方法和屬性，幫助確認當前頁面路由參數(shù)，和手動觸發(fā)路由跳轉
import router from 'next/router';
/*
router.pathname ==> /home
router.query ==> {}
router.route - 當前路由
asPath - 顯示在瀏覽器地址欄的實際的路由
push(url, as=url) - 跳轉頁面的方法
replace(url, as=url) - 跳轉頁面
*/
更好的方式使用路由 – router 的 withRouter 方法
import Link from 'next/link';
import {withRouter} from 'next/router';
const Home = (props) => {
// 這里的 props 會得到 {router, url} 兩個屬性
// router: {push: ƒ, replace: ƒ, reload: ƒ, back: ƒ, prefetch: ƒ, …}
// url: {query: {…}, pathname: "/home", asPath: "/home?name=test", back: ƒ, push: ƒ, …}
console.log(props);
return (
<div>
<p>this is home index page </p>
{/* <Link href="/about" rel="external nofollow" rel="external nofollow" >
<a> to about page</a>
</Link> */}
</div>
);
}
export default withRouter(Home);
8. 使用 next-redux-wrapper 插件輔助實現(xiàn) redux
1. 安裝依賴
sudo yarn add next-redux-wrapper redux react-redux redux-devtools-extension redux-thunk
2. 創(chuàng)建 initializeStore.js 一個可以返回 store 實例的函數(shù)
在這個文件中會完成裝載中間件、綁定reducer、鏈接瀏覽器的redux調試工具等操作
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import reducer from '../modules/reducers';
const middleware = [thunk];
const initializeStore = initialState => {
return createStore(
reducer,
initialState,
composeWithDevTools(applyMiddleware(...middleware))
);
};
export default initializeStore;
3. 創(chuàng)建 reducer , action
與普通 react-redux 項目創(chuàng)建 reducer, action 的方法一致，我把這部分代碼都提取到一個名為 modules的文件夾中
// /modules/reducers.js
import { combineReducers } from 'redux';
import about from './about/reducer';
// 合并到主reducer
const reducers = {
about
};
// combineReducers() 函數(shù)用于將分離的 reducer 合并為一個 reducer
export default combineReducers(reducers);
// /modules/about/reudcer.js
// /about 頁面的 reducer
import {
CHANGE_COUNT
} from '../types-constant';
const initialState = {
count: 0
};
const typesCommands = {
[CHANGE_COUNT](state, action) {
return Object.assign({}, state, { count: action.msg });
},
}
export default function home(state = initialState, action) {
const actionResponse = typesCommands[action.type];
return actionResponse ? actionResponse(state, action) : state;
}
// /modules/about/actions.js
// /about 頁面的 action
import {
CHANGE_COUNT
} from '../types-constant';
export function changeCount(newCount) {
return {
type: CHANGE_COUNT,
msg: newCount
};
}
4. 頁面中使用
需要用到 next-redux-wrapper 提供的 withRedux 高階函數(shù)，以及 react-redux 提供的 connect 高階函數(shù)
import React, { Component } from 'react';
import withRedux from 'next-redux-wrapper';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AboutCom from '../components/About/index';
import initializeStore from '../store/initializeStore';
import { changeCount } from '../modules/about/actions';
class About extends Component {
constructor(props) {
super(props);
}
render() {
const { about: { count }, changeCount } = this.props;
return <AboutCom count={count} changeCount={changeCount} />;
}
}
const connectedPage = connect(
state => ({ about: state.about }),
dispatch => ({
changeCount: bindActionCreators(changeCount, dispatch)
})
)(About);
export default withRedux(initializeStore)(connectedPage);
更多
查看 github官網(wǎng)
react-next github上一個next架構為主實現(xiàn)React服務端渲染的模板
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了ReactJS應用程序中設置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react-json-editor-ajrm解析錯誤與解決方案
由于歷史原因,項目中 JSON 編輯器使用的是 react-json-editor-ajrm,近期遇到一個嚴重的展示錯誤,傳入編輯器的數(shù)據(jù)與展示的不一致,這是產(chǎn)品和用戶不可接受的,本文給大家介紹了react-json-editor-ajrm解析錯誤與解決方案,需要的朋友可以參考下2024-06-06
React?component.forceUpdate()強制重新渲染方式
這篇文章主要介紹了React?component.forceUpdate()強制重新渲染方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了React Router v4 入坑指南(小結)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了React中事件綁定this指向三種方法的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
React實現(xiàn)基于Antd密碼強度校驗組件示例詳解
這篇文章主要為大家介紹了React實現(xiàn)基于Antd密碼強度校驗組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
關于antd tree和父子組件之間的傳值問題(react 總結)
這篇文章主要介紹了關于antd tree 和父子組件之間的傳值問題，是小編給大家總結的一些react知識點，本文通過一個項目需求實例代碼詳解給大家介紹的非常詳細，需要的朋友可以參考下2021-06-06
從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
React需要自己開發(fā)支持插槽功能，原理：父組件組件中寫入的HTML，可以傳入子組件的props中，這篇文章主要介紹了React從插槽、路由、redux的詳細過程,需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細介紹了React中項目路由配置與跳轉方法的相關資料，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以了解一下2023-08-08