First of all, great router, I really like how it works 👍 But It see

Yes, I thought of something like that. For example, I could inject <code class="notran

Pass server side response to client side router on creation about curi HOT 3 CLOSED

pshrmn commented on May 13, 2024

Pass server side response to client side router on creation

from curi.

Comments (3)

pshrmn commented on May 13, 2024

What about setting the data in the HTML markup, like Redux?

https://redux.js.org/recipes/server-rendering#inject-initial-component-html-and-state

You could then have your resolve function check if the initial data exists and only fire off a request if it doesn't. The code below is pretty generic, but hopefully paints a clear picture.

I think that there are strategies for including components in the server rendered markup, but I think that including that isn't really worth the hassle.

function renderHandler(req, res) {
  const router = createRouter(reusable, routes, {
    history: { location: req.url }
  });
  router.once(({ response }) => {
    const Router = createRouterComponent(router);
    const markup = renderToString(
      <Router>
        <App />
      </Router>
    );
    const html = insertMarkup(markup, response);
    res.send(html);
  });
}

function insertMarkup(markup, response) {
  return `<!doctype html>
<html>
  <body>
    <div id="root">${markup}</div>
    <script src="/static/js/bundle.js"></script>
    <script>
      window.__INITIAL_DATA__ = ${JSON.stringify(response.data)};
    </script>
  </body>
</html>`;
}

from curi.

faergeek commented on May 13, 2024

Yes, I thought of something like that. For example, I could inject initialData into external, then make some wrapper for resolvers which would check if data is already there, return it and then reset for subsequent transitions on client, so that other routes do not return other routes' data. I just hoped that it's possible to solve this problem at library level somehow. Not sure how though. Anyway, this probably needs to be added to server side rendering guide as a recipe. What do you think? I would try to write it once I figure out what to do myself))

from curi.

pshrmn commented on May 13, 2024

It would definitely be helpful to have this laid out for others.

I think that I would personally set up a local API that initializes itself with the data set by the server and caches new data after API results. I believe that data stores like Apollo will actually do this for you (if you've jumped on the GraphQL train), but you can also roll your own.

// api.js
const data = window.__INITIAL_DATA__
  ? window.__INITIAL_DATA__
  : {
      products: []
    };

const api = {
  product(id) {
    const cached = data.products.find(p => p.id === id);
    if (cached) {
      return Promise.resolve(cached);
    } else {
      return fetch(`/api/product/${id}`)
        .then(response => response.json())
        .then(result => {
          // cache result
          data.products.push(result);
          return result;
        });
    }
  }
}

export default api;

// routes.js
import api from "./api";

export default prepareRoutes([
  // ...
  {
    name: "Product",
    path: "product/:id",
    resolve({ params }) {
      return api.product(params.id);
    }
]);

from curi.

Pass server side response to client side router on creation about curi HOT 3 CLOSED

Comments (3)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs