React Router Lazy Page

React.lazy alternative for pages with data fetching

Page

Page is a React Component exported from a .js, .jsx, .ts , or .tsx

pages/About.page.tsx

const About = () => <div>About</div>;

export default About;

Next.js – Pages

Data Fetching

pages/Blog.page.tsx

const Blog = ({ posts }) => <ul>
  {posts.map((post) => (
    <li>{post.title}</li>
  ))}
</ul>;

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return { props: { posts } };
}

export default Blog

Next.js – Data Fetching

Usage

App.tsx

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { lazyPage } from 'react-lazy-page';
import { Suspense } from 'react';

export const App = (): JSX.Element => <BrowserRouter>
  <Suspense fallback={<div>Loading...</div>}>
    <Switch>
      <Route path={'/about'} component={lazyPage(() => import('./pages/About.page'))} exact/>
      <Route path={'/blog'} component={lazyPage(() => import('./pages/Blog.page'))} exact/>
    </Switch>
  </Suspense>
</BrowserRouter>;

TODO

• Write documentation
• Publish a package

License

MIT License