Next.js Discord

Discord Forum

Unknown behaviour

Unanswered
Cory's Shearwater posted this in #help-forum
Open in Discord
Cory's ShearwaterOP
I have this code

'use client'
import './home-page.css';
import React from 'react';
import Latex from 'react-latex-next';
import 'katex/dist/katex.min.css';

function App() {

  return (
    <main className='wrapper'>
      <h1>Latex example</h1>
      <div className='reveal'>
        <h2>Latex already present</h2>
        <div>
            <Latex>{'\\(\\sqrt{x^2+1}\\)'}</Latex>
        </div>
      </div>
    </main>
  );
}

export default App;


so
case1: using this const Latex = React.lazy(() => import('react-latex-next'));
case2: using this import Latex from 'react-latex-next'

what is the diff in using case1 or case2 on client side and
what is the diff in using case1 or case2 on SSR.

4 Replies

react.lazy is similar in both the server and client boundaries

In general react lazy importing is so you can reduce the total client bundle by importing components as they are rendered. So you give it suspense to show a loading state while the component gets rendered

https://react.dev/reference/react/lazy
@Cory's Shearwater
@Cory's Shearwater fixed?
@Cory's Shearwater It's about lazy loading. In next.js you can use dynamic/next
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic