{"id":15679574,"url":"https://github.com/mammad2c/mmd-react-ssr","last_synced_at":"2025-05-07T10:05:03.262Z","repository":{"id":39017272,"uuid":"194815855","full_name":"mammad2c/mmd-react-ssr","owner":"mammad2c","description":"React Server Side rendered application (isomorphic) with support fetch data like Next.js using React Router","archived":false,"fork":false,"pushed_at":"2023-01-06T15:32:27.000Z","size":3130,"stargazers_count":13,"open_issues_count":15,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-07T10:04:14.576Z","etag":null,"topics":["code-splitting","expressjs","isomorphic-applications","react","react-helmet","react-router","react-router-dom","reactjs","reactrouter","serverside-rendering","ssr","template-project","universal-components","universal-react","universal-rendering","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mammad2c.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-02T07:54:02.000Z","updated_at":"2025-01-05T14:35:06.000Z","dependencies_parsed_at":"2023-02-06T06:00:26.788Z","dependency_job_id":null,"html_url":"https://github.com/mammad2c/mmd-react-ssr","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mammad2c%2Fmmd-react-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mammad2c%2Fmmd-react-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mammad2c%2Fmmd-react-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mammad2c%2Fmmd-react-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mammad2c","download_url":"https://codeload.github.com/mammad2c/mmd-react-ssr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252856554,"owners_count":21814858,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","expressjs","isomorphic-applications","react","react-helmet","react-router","react-router-dom","reactjs","reactrouter","serverside-rendering","ssr","template-project","universal-components","universal-react","universal-rendering","webpack"],"created_at":"2024-10-03T16:33:14.774Z","updated_at":"2025-05-07T10:05:03.197Z","avatar_url":"https://github.com/mammad2c.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mmd-react-ssr\n\nA React Server Side rendered application template (isomorphic) with support fetch data like Next.js using React Router\n\n![demo](demo.gif)\n\n**Note**: Updated project for using `react@17` 🔥\n\n**Note**: Updated to `webpack v5` 🔥\n\n🔥 Using React Router.\n\n🔥 Support React Hot Reloading\n\n🔥 Code splitting by [`loadable-components`](https://loadable-components.com/), recommended solution by [`React Team`](https://reactjs.org/docs/code-splitting.html#reactlazy)\n\n🔥 Code validation with `eslint` and `airbnb`.\n\n🔥 Code formatting with `prettier`.\n\n🔥 Style validation and formatter with `stylelint`.\n\n🔥 Unit testing with `jest` and `react-testing-library`.\n\n🔥 Support `postCSS`.\n\n🔥 Support `SASS/SCSS` by default. Import all your `SASS/SCSS` files in `styles/App.scss`.\n\n🔥 You can extends configs and setup your needs. All webpack configs are in `webpacks` directory.\n\n## Requirements\n\n- `NodeJs` v10 above\n- `yarn`\n\n**Note**: this project relay on `yarn` and `node_modules` will relay on that. it will throw error if you use `npm` to run commands.\n\n## How to use\n\n1- git clone this project.\n\n2- remove `.git` folder.\n\n3- `yarn install`\n\n4- `yarn start`\n\nnow start coding !!\n\nyou can see in `http://localhost:3000`.\n\n## Production and Deployment\n\n1- Run `yarn build`. a `build` folder will be created that ready for deployment.\n\n2- Now serve the `build` folder with `NodeJs`.\n\n`node build/server.js`\n\nnote: Suggest using [`pm2`](http://pm2.keymetrics.io/)\n\n## How to fetch data ssr\n\nAll route components with a `static property` called `getInitialData` can fetch data on `server` and pass down data as props called `initialData`.\nyou can see examples in `screens/Projects.jsx` or `screens/About.jsx`.\n\n#### Steps:\n\n2- add a `static async getInitialData` to the a route component:\n\n- after component definition:\n\n```\nComponent.getInitialData = async ({ match, req, res, history, location }) {\n    const api = await axios.get('https://jsonplaceholder.typicode.com/users');\n\n    return { ...api.data };\n}\n```\n\n- or during component definition:\n\n```\nconst Component = () =\u003e {\n  static async getInitialData({ match, req, res, history, location }) {\n    const api = await axios.get('https://jsonplaceholder.typicode.com/users');\n\n    return { ...api.data };\n  }\n}\n```\n\nnote: we use axios because support node.js and browser.\n\n3- now you can access your fetched data as `initialData` component props;\n\n## getInitialData parameters:\n\n- match (matched route, both on server and client)\n- req (request object ExpressJs, only server)\n- res (response object ExpressJs, only server)\n- history (react router history, only client)\n- location (react router location, only client)\n\n## RouteComponents props\n\n- `initialData`: fetched data for SSR. If you don't make SSR this component it will be `null`.\n- `reFetch`: fetch again data by calling `getInitialData` if provided in component\n- `isLoading`: loading when getting data with `getInitialData`.\n- `RouteComponentProps` provided by `react-router`. You can see them here [withRouter](https://reacttraining.com/react-router/core/api/withRouter)\n\n## How to manage `head`\n\nyou can use `react-helmet` like before in your components.\n\n## Code splitting\n\nCode splitting in this project implemented by [`loadable-components`](https://loadable-components.com/).\n\nFor routes component you should use our `asyncComponent` in `routes.js` file. the `asyncComponent` will take care of code splitting and `getInitialData` if provided on component. see usage in `routes.js`.\n\nexample:\n\n`asyncComponent(()=\u003e import(\"./screens/Projects.jsx\"))`\n\nfor other components you could see [`loadable-components`](https://loadable-components.com/) documents. but as a short example:\n\n```\nimport loadable from '@loadable/component'\nconst OtherComponent = loadable(() =\u003e import('./OtherComponent'))\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cOtherComponent /\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\nPlease visit [`loadable-components`](https://loadable-components.com/) documents for advanced usages and configuration.\n\nInside `asyncComponent` we use a simple `loading ...` message until component loaded completely. If you want you can customize it.\n\n## How to test\n\n1- create folder `__tests__` under your component directory.\n\n2- create file with `filename.test.js` or `filename.spec.js`. for example `Projects.spec.js`.\n\n3- write tests.\n\n4- enter `yarn test` for run tests, or `yarn test:watch` to run in watch mode.\n\nnote: you can create test file without `__tests__` folder but for better file structure keep it in `__tests__`.\n\n---\n\n# Inspiration\n\n- [razzle](https://github.com/jaredpalmer/razzle)\n- [facebookincubator/create-react-app](https://github.com/facebookincubator/create-react-app)\n- [zeit/next.js](https://github.com/zeit/next.js)\n- [after.js](https://github.com/jaredpalmer/after.js)\n- [jaredpalmer/react-router-nextjs-like-data-fetching](https://github.com/jaredpalmer/react-router-nextjs-like-data-fetching)\n- [vue-cli](https://cli.vuejs.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmammad2c%2Fmmd-react-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmammad2c%2Fmmd-react-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmammad2c%2Fmmd-react-ssr/lists"}