Fetch data before returning components

[reactend]

Fetch data before returning components

[gigantz]

Yes, sure you can.

Several ways to do that:
4th argument in handler is render function, just pass your components inside and it works.

<Get
  path="/status"
  handler={async (req, res, next, renderPage) => {
    const data = await getData();
    res.send(renderPage(() => <div>{JSON.stringify(data)}</div>));
  }}
/>

or use useContext to access req:

const YourComponent = () => {
  const { req } = useContext(ReqResContext);
  return <div>{JSON.stringify(req.fetchedData)}</div>;
};

and do your async getData in middleware to pass through req:

<Get path="/status">
  <Middleware
    handler={async (req, res, next) => {
      req.fetchedData = await getData();
      next();
    }} />
  <Res.Render component={YourComponent} />
</Get>

or in handler:

<Get path="/status" handler={async (req) => {
  req.fetchedData = await getData();
}}>
  <Res.Render component={YourComponent} />
</Get>

There's another way to fetch it inside your react dom component, but it's disabled for now, I'm working on it and ship as soon as I done with that.

[subhendukundu]

Phew! This is such a brilliant idea. ❤️