Have you ever heard about the shared data practice?

Let me explain what does it mean. It means that initial data for a particular page is included in the HTML and does not need to be fetched from the backend using AJAX. It increases the speed of a page loading and decreases an amount of requests.

This kind of approach is used by Instagram. Let's take it as an example.

Instagram is written in React. It means that the page content is rendered on the frontend side (not the backend one). So we need to get the data from somewhere in order to render it. The most common case is fetching the data from the backend using AJAX. But Instagram combines AJAX usage with the shared data approach.

It makes no sense to fetch data using AJAX, if it can be included it the HTML page.

There is no reason to fetch data, if it can be included into HTML page.

Let's take a look which kind of data is included as the shared data in my Instagram profile page.

As you can see, almost all data which is displayed on the page is present in the shared data:

Profile

Even first 12 posts are also here:

Profile

This way we don't need to make an extra request in order to load first 12 posts because they are already included.

Only if we scroll down and want more posts to be loaded, extra requests are sent for retreiving them.

mention laravel-shared-data

mention js-shared-data