x-technology/back-to-the-roots-with-remix

back-to-the-roots-with-remix's Issues

2. Add feature load data from api endpoints on backend

The current esbuild-experiment provides web server endpoints which can send data or rendered React components.
Originally, Remix processes API data requests on backend and passes data to components before they are rendered. Design and implement a way for experiment esbuild web server to process data endpoints and use it for generating React components on backend.

1. Clone back-to-the-roots-with-remix repository
2. Find web server endpoint definitions
3. Design and implement a solution for fetching data on backend side before rendering React components. Hint: You can start by attaching, placing route (in Remix - loader) function call inside the component method.

1. Create an empty Remix project "back-to-the-roots-with-remix"

There are a couple of options for doing so

1. Official (preferable) is to run npm init as described here: https://remix.run/docs/en/main/tutorials/blog#creating-the-project
2. Or you can clone this repo

Then you can run npm/yarn to install the dependencies inside the folder with the project. For this repo that would be "remix"

2. Add the first route that returns a list of data, which is stored in the variable

You can get inspired by "/remix" folder. It has "/remix/app/mocks" folded, from where you can get the data.

Then in the "/remix/app/routes" you can create a new route, for example "movies/index.tsx" where you need to create two exports: "loader" and a default export with a React component.

Great source for details is again Remix docs:
https://remix.run/docs/en/main/tutorials/blog#loading-data

1. Implement alternative web server for esbuild experiment

In the current esbuild-experiment we've used fastify Node.js framework as a web server.
Remix community has onboarded and maintains multiple adapters for this purpose. Provide alternative web server adapter - for instance ExpressJS, to register routes and React server side rendered components.

1. Clone back-to-the-roots-with-remix repository
2. Find Web server definition
3. Create a new adapter (it might need to further separate code first - dev-server, utils, etc) by introducing a new turbo package. Hint: You can start by just replacing current functionality

3. Use streams to render React components on backend

The current esbuild-experiment provides web server endpoints which can render React components via renderToStaticMarkup function, which synchronously translates components into HTML. This approach has serious performance drawbacks. Design and implement a way for experiment esbuild web server to stream components from web server render endpoints to generate React components on backend.

1. Clone back-to-the-roots-with-remix repository
2. Find web server endpoint definitions
3. Design and implement a solution for fetching data on backend side before rendering React components. Hint: It's much easier implement it with Express web server first

3. Create route that adds data to the variable from the "step 2"

It's not a big difference with the route to load the data, but the functions that must be exported from the route file are: "action" and default with a form component.

As always, example with the details is here https://remix.run/docs/en/main/tutorials/blog#actions