https://github.com/mati365/react-asynchronous-ssr-blog

SSR rendering asynchronous react components in Express with Knex/Objection.js DB connection
https://github.com/mati365/react-asynchronous-ssr-blog

async example express knex objection react ssr

Last synced: 2 months ago
JSON representation

SSR rendering asynchronous react components in Express with Knex/Objection.js DB connection

• Host: GitHub
• URL: https://github.com/mati365/react-asynchronous-ssr-blog
• Owner: Mati365
• Created: 2018-10-24T18:38:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-23T08:59:52.000Z (over 7 years ago)
• Last Synced: 2025-03-29T07:42:40.248Z (over 1 year ago)
• Topics: async, example, express, knex, objection, react, ssr
• Language: JavaScript
• Homepage:
• Size: 1.13 MB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-asynchronous-ssr-blog

SPA blog using Asynchronous React SSR components to fetch data from API and display it for SEO. Supports tags, reactions.

### Screens

![Main](/doc/img/1.png)

![Article](/doc/img/2.png)

![Tag](/doc/img/3.png)

### Run

```

yarn install

yarn run start

```

### ENV

example:

```

DB_NAME=database

DB_USER=user

DB_PASSWORD=123456

DB_HOST=localhost

DB_PORT=5432

API_URL=http://lvh.me:3000

```

### Async API response rendering

Server renders something like it:

```

 timeout(100, 'xD')}

>

  {data => (

    
{data}

  )}


```

collects promises:

```

const data = await mapObjValuesToPromise(

  R.identity,

  asyncContext.promises,

);

```

and renders whole tree again:

```

  const asyncContext = {

    cache,

    promises,

    attachPromise: function addPromise(uuid, promise) {

      promises[uuid] = promise;

      return promise;

    },

  };

  return (

    

      {component}

    

  );

```

with already downloaded data stored in context. It is slow but works