Xóa bài viết
Bạn có chắc chắn muốn xóa bài viết này không ?
Xóa bình luận
Bạn có chắc chắn muốn xóa bình luận này không ?
Isomorphic ReactJS Component
This post is a sample chapter from my upcoming book
How to render a ReactJS component isomorphically ?
The trick is in defaultProps
and componentDidMount
methods.
- On the server, it fetches initial data as default props.
- On client, it does nothing, but in
componentDidMount
method, it fetches the same data as the server side.
And you get isomorphic React component for free here!.
import React from 'react';
import AppState from '../stores/app-state'
class PostsList extends React.Component {
constructor(props){
super(props)
this.state = {data: props.data}
}
componentDidMount(){
AppState("/lists", (data) => {
this.setState({data: data})
})
}
render(){
let y = this.state.data.map((x) => <div>{x.title}</div>)
return (
<div>
<p>Posts List </p>
{y}
</div>
)
}
}
PostsList.contextTypes = {
router: React.PropTypes.func.isRequired
}
PostsList.propTypes = {
data: React.PropTypes.array.isRequired
}
if (typeof window === 'undefined'){
AppState("/lists", (data) => {
PostsList.defaultProps = {data: data}
})
} else {
PostsList.defaultProps = {data: []}
}
export default PostsList;
Explanation:
Suppose:
- You use
React-Router
on bothclient
andserver
- You have a
polyfill AppState
to fetch data on bothclient
andserver
:
export default AppState = (path) => {
// if this is client
{... your code here}
// else if you're on server
{... your code here}
}
- You use
ES6
syntax withReact.JS
Then:
- When you make a
http request
to'/lists
, theserver
first render thePostsList
component with the props data fetched byAppState
- Once rendered in the browser, the
componentDidMount
will fetch data fromserver api
to updateits state data
to match the initial rendered data.
So:
- If you view
page source
, you'll get fullrendered html
withinitial data
(it's calledserver-rendering
) - Your
rendered React component
is now a realReact component
with its life cycle. You can make anything you want from now. - To test these things, simply
disable Javascript
on client, and refresh the page. You'll get the same result!
Please make any feedback and suggestions.
Thank you for reading.
Bình luận

{{ comment.user.name }}
Bỏ hay
Hay

Cùng một tác giả

6
1
Tôi dự sẽ viết 1 loạt series về việc thiết kế 1 ứng dụng Rails như thế nào để nó có thể giúp bạn ăn ngon ngủ yên trong hằng năm trời: Khi mà việc t...

6
10
Cũng ngót nghét đi làm hơn 6 năm rồi, mình chỉ thấy một điều khá "ngược đời": Các ông chủ , những người trả tiền cho bạn lại có tư duy lập trình ké...

5
0
Bài viết này, là 1 quan điểm cá nhân trong việc viết Code các layer trong Rails của mình. Controller Trước khi code, bạn hãy đặt câu hỏi: Mục đí...
Bài viết liên quan

1
0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...

0
0
https://grokonez.com/frontend/angular/angular6/angular6httpinterceptorwithnodejsrestapis Angular provides HTTP Interception to inspect and transfo...

0
0
https://grokonez.com/nodejs/nodejsimportexcelfiletomysqlusingreadexcelfilelib Node.js Import Excel File to MySQL – using ReadExcelFile lib In t...