Understanding Page Delivery Post Login
I'm trying to understand basic ideas behind serving pages.
For instance, let's say I have two pages in my app. A login page, then the main app page that is served after logging in. The login page gets user input then posts to the server. If the input is good, the server will deliver the app to the client.
But serving just the app itself would be useless as they wouldn't have any of their data.
I think this is normally dealt with by having templates that are filled with data and then sent to the client?
But with react the better idea may be to render the page server side then serve it? Or is it better to have the client app be one page, tying the login and app together under a parent component which then passes the return data from the login post?
I'm trying to understand the ways of dealing with this problem in react.
Thanks
Answer
If it's a relatively small amount of data that is needed to bootstrap the content of the page then the best approach is usually to embed the data within a <script>
tag on the page then send this data as a prop to the top level component. For example:
<head>
<script>
function getInitData() {
return {
user: {
email: '[email protected]',
name: 'A. B. Cooper'
},
cats: [
'fluffy',
'tiger',
]
};
}
</script>
</head>
...
<body>
<div id="root></div>
<script>
rootNode = document.getElementById('root');
React.render(MyTopComponent({initData: getInitData()}, rootNode);
</script>
</body>
If it's a large amount of data you'll want to set up API calls and fetch the data asynchronously. As @Josh pointed out there are ultimately many ways to do this, but this is a starting place.
Related Questions
- → Maximum call stack exceeded when instantiating class inside of a module
- → Browserify api: how to pass advanced option to script
- → Node.js Passing object from server.js to external modules?
- → gulp-rename makes copies, but does not replace
- → requiring RX.js in node.js
- → Remove an ObjectId from an array of objectId
- → Can not connect to Redis
- → React: How to publish page on server using React-starter-kit
- → Express - better pattern for passing data between middleware functions
- → Can't get plotly + node.js to stream data coming through POST requests
- → IsGenerator implementation
- → Async/Await not waiting
- → (Socket.io on nodejs) Updating div with mysql data stops without showing error