TutorialMeta
Ad

Understanding Page Delivery Post Login

- 1 answer

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

Ad

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.

Ad
source: stackoverflow.com
← Previous Post
Next Post →

Related Questions

Ad