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:

  1. You use React-Router on both client and server
  2. You have a polyfill AppState to fetch data on both client and server:
export default AppState = (path) => {
    // if this is client
    {... your code here}
    // else if you're on server
    {... your code here}
}
  1. You use ES6 syntax with React.JS

Then:

  1. When you make a http request to '/lists, the server first render the PostsList component with the props data fetched by AppState
  2. Once rendered in the browser, the componentDidMount will fetch data from server api to update its state data to match the initial rendered data.

So:

  1. If you view page source, you'll get full rendered html with initial data (it's called server-rendering)
  2. Your rendered React component is now a real React component with its life cycle. You can make anything you want from now.
  3. 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


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

checkraiser

17 bài viết.
20 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
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...
checkraiser viết hơn 2 năm trước
6 1
White
5 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é...
checkraiser viết 10 tháng trước
5 10
White
3 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 đí...
checkraiser viết 2 năm trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
17 bài viết.
20 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!