I am trying to improve loading speed of a react web app.
I have two component imports - one for mobile and one for desktop (Bad design? I think so):
import Posts from '../components/post/posts';
import PostsMobile from '../components/post/postsMobile';
This was easy for development because I did not have to try hard to make the same component compatible for desktop and mobile.
Then to check screen size and load the appropriate component, I do this:
const largeScreen = useMediaQuery(theme => theme.breakpoints.up('sm'));
...
{largeScreen? (
<Posts />
) :
(
<PostsMobile />
)
}
You can resize the browser here to see the two components load: Link to home page showing the two components
Does <PostsMobile /> get imported only when react sees that its needed OR does it automatically get imported in the beginning no matter what?
Is there a better way to conditionally render mutually exclusive components without compromising load time?
Classic conditional rendering, that's the appropriate way to do it, only one component will be added to the DOM in any case. As a side note it's not the best idea to have two different components for mobile vs desktop view, generally your html structure should be the same and you should use CSS for any layout changes (as per Google's suggestions - https://web.dev/responsive-web-design-basics/)
Check out #artsy/fresnel, they have a very straightforward example showing how to configure Next.js and Gatsby.js to achieve screen-width dependent control in SSR environments
Note: it hardly increases overhead size; I am using it in my portfolio currently in conjunction with tailwindcss and it has proven to be a fantastic tool. Easy to configure and its implementation is straightforward. Here is an example of conditionally rendering the same svg icon four times as a function of screen size to customize styles accordingly (xs (mobile), sm, md, greater than md (desktop))
(1) Create a window-width file in your components directory to configure #artsy/fresnel for global sharing
components/window-width.jsx or components/window-width.tsx
import { createMedia } from '#artsy/fresnel';
const PortfolioMedia= createMedia({
breakpoints: {
xs: 0,
sm: 768,
md: 1000,
lg: 1200,
},
})
// Generate CSS to be injected in the head using a styles tag (pages/_document.jsx or pages/_document.tsx)
export const mediaStyles = PortfolioMedia.createMediaStyle();
export const { Media, MediaContextProvider } = PortfolioMedia;
// https://github.com/artsy/fresnel/tree/master/examples/nextjs
Note, you can customize the breakpoints however you'd like; the following breakpoints are from my portfolio's configuration file. They overlap with Tailwind's breakpoints to keep them playing nicely together
// ...
const PortfolioMedia = createMedia({
breakpoints: {
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280
}
});
// ...
(2) Wrap pages/index.jsx or pages/index.tsx with the MediaContextProvider component
// ...
import { MediaContextProvider } from 'components/window-width';
interface IndexProps {
allPosts: Post[];
allAbout: AboutType[];
allBlog: BlogType[];
}
const Index = ({ allPosts, allAbout, allBlog }: IndexProps) => {
const morePosts = allPosts.slice(0);
const moreAbout = allAbout.slice(0);
const moreBlog = allBlog.slice(0);
return (
<Fragment>
<MediaContextProvider>
<Lead />
<Head>
<title>{`${CLIENT_NAME} landing page`}</title>
</Head>
<div className='max-w-cardGridMobile md:max-w-cardGrid my-portfolioH2F grid mx-auto content-center justify-center items-center text-center'>
{morePosts.length > 0 && <Cards posts={morePosts} />}
</div>
<div className='max-w-full my-portfolioH2F block mx-auto content-center justify-center items-center text-left'>
{moreAbout.length > 0 && <AboutCoalesced abouts={allAbout} />}
</div>
<div className='max-w-full my-portfolioH2F block mx-auto content-center justify-center items-center text-left'>
{moreBlog.length > 0 && <BlogCoalesced blogs={allBlog} />}
</div>
<Footer />
</MediaContextProvider>
</Fragment>
);
};
export default Index;
// ...
(3) Finally, inject generated mediaStyles CSS into a style tag of type text/css in Next's Head
pages/_document.jsx or pages/_document.tsx
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext
} from 'next/document';
import { mediaStyles } from 'components/window-width';
export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang='en-US'>
<Head>
<meta charSet='utf-8' />
<link rel='stylesheet' href='https://use.typekit.net/cub6off.css' />
<style type='text/css' dangerouslySetInnerHTML={{ __html: mediaStyles }} />
</Head>
<body className='root'>
<script src='./noflash.js' />
<Main />
<NextScript />
</body>
</Html>
);
}
}
(4) Profit; Configuration complete
That's all there is to it. For the sake of clarity I threw in an actual example from one of my projects below.
(5) Bonus example - conditionally rendering ArIcon as a function of device-size
components/lead-arIcon.tsx
import { ArIcon } from 'components/svg-icons';
import Link from 'next/link';
import { Media } from 'components/window-width';
import { Fragment } from 'react';
import DarkMode from 'components/lead-dark-mode';
const ArIconConditional = (): JSX.Element => {
const arIconXs: JSX.Element = (
<Media at='xs'>
<Link href='/'>
<a
className='container block pl-portfolio pt-portfolio justify-between mx-auto w-full min-w-full '
id='top'
aria-label='top'
>
<ArIcon width='18vw' height='18vw' />
</a>
</Link>
</Media>
);
const arIconSm: JSX.Element = (
<Media at='sm'>
<Link href='/'>
<a
className='container block pl-portfolio pt-portfolio justify-between mx-auto w-full min-w-full '
id='top'
aria-label='top'
>
<ArIcon width='15vw' height='15vw' />
</a>
</Link>
</Media>
);
const arIconMd: JSX.Element = (
<Media at='md'>
<Link href='/'>
<a
className='container block pl-portfolio pt-portfolio justify-between mx-auto w-full min-w-full '
id='top'
aria-label='top'
>
<ArIcon width='12.5vw' height='12.5vw' />
</a>
</Link>
</Media>
);
const arIconDesktop: JSX.Element = (
<Media greaterThan='md'>
<Link href='/'>
<a
className='container block pl-portfolio pt-portfolio justify-between mx-auto w-full min-w-full'
id='top'
aria-label='top'
>
<ArIcon
width='10vw'
height='10vw'
classNames={[
` antialised w-svgIcon max-w-svgIcon transform transition-all`,
' stroke-current',
` fill-primary`
]}
/>
</a>
</Link>
</Media>
);
const DarkModeToggler = (): JSX.Element => (
<div className='pt-portfolio text-customTitle transition-all transform -translate-y-mdmxSocial col-span-4 text-right -translate-x-portfolioPadding'>
<DarkMode />
</div>
);
const ArIconsCoalesced = (): JSX.Element => (
<Fragment>
<div className='relative block justify-between lg:w-auto lg:static lg:block lg:justify-start transition-all w-full min-w-full col-span-2'>
{arIconXs}
{arIconSm}
{arIconMd}
{arIconDesktop}
</div>
</Fragment>
);
return (
<Fragment>
<div className='select-none relative z-1 justify-between pt-portfolioDivider navbar-expand-lg grid grid-cols-6 min-w-full w-full container overflow-y-hidden overflow-x-hidden transform'>
<ArIconsCoalesced />
<DarkModeToggler />
</div>
</Fragment>
);
};
export default ArIconConditional;
You could try to lazy load the components.
posts;
componentDidMount() {
if (largeScreen) {
import('../components/post/posts').then(({ default: Posts }) => {
// ^^^^ make sure it has a default export
this.posts = Posts;
this.forceUpdate();
});
} else {
// here load the other component for lower screens
}
}
Then, inside render:
const Posts = this.posts;
return largeScreen? (
<Posts />
) : (
<PostsMobile />
);
Note: You will have to also add a resize listener, so if the screen reaches certain width, the another component will load and will get rendered.
Note2: If you don't care about SSR - you could either try React.lazy with Suspense: https://en.reactjs.org/docs/code-splitting.html#reactlazy
In my opinion there are very valid usages of Desktop vs. Mobile components, for example, although CSS versions are definitely almost always preferred, it might not make sense for drag and drop components that don't work on mobiles, mobile-only hamburger menus, etc.
React's lazy loading is the way to go (unless you need SSR):
import React, { Suspense } from 'react';
const Posts = React.lazy(() => import('../components/post/posts');
const PostsMobile = React.lazy(() => import('../components/post/postsMobile');
function MainComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
{ largeScreen? ( <Posts />) : <PostsMobile /> }
</Suspense>
</div>
);
}
This will guarantee that the component is only loaded when it is first rendered. Bonus tip: if you change the loading div to an animated loading placeholder, the UI of your application may be more pleasant.
None of the answers were compatible with SSR using Nextjs so I ended up using Dynamic Import feature. Looks very powerful but simple.
https://nextjs.org/docs/advanced-features/dynamic-import
import dynamic from 'next/dynamic'
const Posts = dynamic(() => import('../components/post/posts'),
{ loading: () => <LinearProgress /> });
const PostsMobile = dynamic(() => import('../components/post/postsMobile'),
{ loading: () => <LinearProgress /> });
This saved me a few milliseconds
I am not sure if there is a better option so I hope people will comment.
Related
I have a component (Navigation) inside a next.js Layout routed by framer-motion, that renders animation every time I change the route. I want to make it render the animation only the first time I go to the /app page. Tried to use useRef of the component, but it wasn't animating at all. Thanks.
So:
/app - it renders the animation
/app/chats - it renders the animation again
Navigation animation rerender example
Navigation component itself
export const UserNavigation = () => {
return (
<motion.section
initial={{ x: -56 }}
animate={{ x: 0 }}
transition={{bounce: false}}
className="h-[100%] w-14 bg-gray-900"
>
<div className="flex flex-col gap-4 items-center justify-center mt-2">
<Link href="/app/chats">
<button
className={classNames(
isChatsPage ? "bg-gray-700" : "hover:bg-gray-700",
"text-white rounded-lg p-2 transition duration-200"
)}
>
<ChatBubbleBottomCenterTextIcon className="w-6 h-6" />
<span className="sr-only">Chats</span>
</button>
</Link>
</div>
</motion.section>
);
};
Layout
export const UserLayout: FC<{ children: ReactNode }> = ({ children }) => {
return (
<main className="h-screen w-screen flex">
<UserNavigation />
{children}
</main>
);
};
Chats page
export const Chats: NextPage = () => {
return (
<UserLayout>
<motion.section
initial={{ x: -56 }}
animate={{ x: 0 }}
transition={{ bounce: false }}
className="w-72 h-full bg-gray-800"
></motion.section>
</UserLayout>
);
};
I had a similar problem a while ago.
In my case I needed to manage animations on enter and on exit of a route. This post helped me out - https://blog.sethcorker.com/page-transitions-in-react-router-with-framer-motion. The main takeaway was the need to supply a key prop for the Switch child so AnimatePresence (https://www.framer.com/docs/animate-presence/) could reliably do it's thing.
But based on your example it doesn't look like you need the added complexity of AnimatePresence. If that is the case, you might just need to fiddle with your layout and routing to get what you need. Here's an example that might give you some ideas of things to try - https://codesandbox.io/s/so-73692915-714wdk.
Preview of the changes at runtime:
I have two states (userCustomers and loans) which are depending on a state coming from a custom hook (customers).
const [customers] = useLoanCustomers(state.contents.date)
const [userCustomers, setUserCustomers] = useState<DwCustomerHeadline[]>([])
const [loans, setLoans] = useState<DwLoanContract[]>([])
So I filter data depending on the output of the useLoanCustomers and have an empty array as initial state.
When I refresh the page, the useEffect works fine and sets the states of "userCustomers" and "loans"
But when I switch between pages/routes, the useEffect does not work and keeps the initial state [].
e.g this component is on 'http://localhost:3000/user/overview'.
if I go to another route like 'http://localhost:3000/clients' and then back to '/user/overview', the states "userCustomers" and "loans" are empty. So the useEffect does not set those states.
"useLoanCustomers" is loading as expected and holds all the data.
when I console log inside the useEffect, I can see that useEffect is running properly depending on the dependency change.
But it is not setting the other two states. As said, only when I refresh the page.
Has anyone a clue what's wrong, because I've already tried so much but can't figure it out.
This is my entire component
export const Overview: React.FC<OverviewProps> = ({ user }) => {
const { keycloak } = useKeycloak()
const { state } = useContext(DashboardContext)
const [customers] = useLoanCustomers(state.contents.date)
const [userCustomers, setUserCustomers] = useState<DwCustomerHeadline[]>([])
const [loans, setLoans] = useState<DwLoanContract[]>([])
useEffect(() => {
const filteredCustomers = customers.filter((customer) => customer.stafferEmail === user?.email)
setUserCustomers(filteredCustomers)
Promise.all(filteredCustomers.map((customer) => getCustomerLoans(keycloak, customer.counterpartyId))).then((res) =>
setLoans(res.flat())
)
}, [customers])
return (
<>
<div className="grid gap-4 p-2 md:grid-cols-3 sm:grid-cols-1">
<div className="col-span-2 shadow-sm">
<KeyMetrics />
</div>
<div className="shadow-sm">
<NextReview customers={userCustomers} />
</div>
</div>
<div className="grid gap-4 p-2 md:grid-cols-3 sm:grid-cols-1 grid-rows-2">
<div className="md:h-80 col-span-2 shadow-sm">
<ErpOverview customers={userCustomers} />
</div>
<div className="row-span-2 shadow-sm" style={{ height: '34rem' }}>
<Outflow loans={loans} endDate={state.contents.date} />
</div>
<div className="h-52 col-span-2 shadow-sm">
<LoanArrears customers={userCustomers} />
</div>
</div>
</>
)
}
I am using this code snippet in a Gatsby project, It seems using AniLink inside another AniLink is not allowed, but I can not figure out the solution:
import React from 'react'
import AniLink from "gatsby-plugin-transition-link/AniLink";
const titleStyle = {
fontWeight: "700",
}
const authorLinkStyle = {
color: "#00BCD4"
}
const Author = ({ children, to }) => (
<AniLink style={authorLinkStyle} to={to} className="font-weight-bold" fade>
{children}
</AniLink>
)
const Card = ({ title, description, timeStamp, authorName, slug }) => {
const cardTextColor = typeof window !== "undefined" && getComputedStyle(document.documentElement).getPropertyValue("--card-text-color")
const cardLinkStyle = { color: cardTextColor, textDecoration: "none" }
return (
<AniLink
style={cardLinkStyle}
to={slug}
cover
bg="#00BCD4"
>
<div className="card my-4" >
<div className="card-body" >
<h5 className="card-title" style={titleStyle}>{title}</h5>
<p className="card-text">{description}</p>
<h6 className="card-subtitle text-muted">
<Author to="/about">{authorName}</Author> on {timeStamp}
</h6>
</div>
</div>
</AniLink>)
}
export default Card
I think errors happen from this line:
<Author to="/about">{authorName}</Author> on {timeStamp}
The error in F12:
Have anyone using AniLink and see this error?
Any suggestion would be great..
Thanks
Well, basically you spotted the mistake. You are wrapping a component (AniLink, which is an anchor, <a>) inside another anchor (Author component).
This, when compiled and transpiled into the output HTML, is creating an invalid structure of an anchor as a descendant of another anchor (<a><a>Link</a></a>). Is not an issue of AniLink nor React or Gatsby, is an issue of your component's structure.
The solution is simple, don't wrap it. You may want to do the something like:
<div className="card my-4" >
<div className="card-body" >
<AniLink
style={cardLinkStyle}
to={slug}
cover
bg="#00BCD4"
>
<h5 className="card-title" style={titleStyle}>{title}</h5>
<p className="card-text">{description}</p>
</AniLink>
<h6 className="card-subtitle text-muted">
<Author to="/about">{authorName}</Author> on {timeStamp}
</h6>
</div>
</div>
The snippet above won't create the error but you may need to tweak the layout to fit your specifications and design.
I'm building a frontend application for e-commerce project and I'm using React 17.x and Nextjs 10.2.3. My problem is when I change page with next/link getServerSideProps doesn't called but when I refresh the page getServerSideProps called and sending request to backend. I looked to documentation of next/link it's says next/link has a shallow property for calling getServerSideProps for pre-fetching or not and I turned that property to false but still getServerSideProps doesn't called with next/link. Is there any way except not using next/link?
One page of my project
interface HomeProps {
announcements: IAnnouncement[];
campaigns: ICampaignResponse[];
companies: ICompaniesResponse[];
creditSummary: ICreditResponse;
}
export const getServerSideProps = async (
context: GetServerSidePropsContext
) => {
const announcements = await queryEndpoints.getAnnouncements();
const creditSummary = await queryEndpoints.getCredit();
const companies = await queryEndpoints.getCompanies();
const campaigns = await queryEndpoints.getCampaigns();
return {
props: {
announcements,
creditSummary,
companies,
campaigns,
},
};
};
export default function Home({
companies,
campaigns,
creditSummary,
}: HomeProps) {
return (
<>
<Container>
<CampaignsBlock campaigns={campaigns} />
<div className="grid grid-cols-12 gap-4 pt-18 pb-24">
<div className="border border-gray-300 p-8 rounded-md col-start-1 col-end-13 lg:col-end-8 xl:col-end-8 order-2 lg:order-1 xl:order-1">
<div className="w-full">
<SectionHeader sectionHeading="Duyuru" />
<p className="text-body text-xs lg:text-sm leading-normal xl:leading-relaxed">
Monochrome elegance. Made with a relaxed wide-leg, these
trousers are made from a sustainable soft organic cotton with a
mechanical stretch making the garment easily recycled.
</p>
</div>
</div>
<div className="col-start-1 col-end-13 lg:col-start-8 xl:col-start-8 order-1 lg:order-2 xl:order-2">
<CreditsBlock creditSummary={creditSummary} />
</div>
</div>
<CompaniesBlock companies={companies} />
</Container>
</>
);
}
I am trying to figure out how to fade between 2 different components with a nice easy 1 second transition. I have played around with SwitchTransition and CSSTransition and TransitionGroup and nothing seems to work quite right for me. It looks like SwitchTransition is what I am looking for but the only examples I can find they are just swapping out text and not whole components.
So here is the code for my two components which are shown conditionally based on state variables. Each component has a button that will swap the state variable values so it will currently swap between the two, but it doesn't look real pretty.
<div className="login col-md-6 mt-5 mx-auto">
{showLogin && (
<LoginForm
onLoginSubmit={onLoginSubmit}
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
showPasswordReset={showPasswordReset}
/>
)}
{showForgotPassword && (
<ForgotPasswordForm
onPasswordResetSubmit={onPasswordResetSubmit}
setShowForgotPassword={setShowForgotPassword}
/>
)}
</div>
You can use react-spring to animate your components, first
import { animated, useTransition } from "react-spring";
then inside your component
const [showLogin, set] = useState(false);
const toggle = () => {
set(!showLogin);
};
const transitions = useTransition(showLogin, null, {
from: { position: "absolute", opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 }
});
and then you will render your components, make sure to replace div with animated.div
<div className="login col-md-6 mt-5 mx-auto">
{transitions.map(({ item, key, props }) =>
item ? (
<LoginForm //animated.div
onLoginSubmit={onLoginSubmit}
email={email}
setEmail={setEmail}
password={password}
setPassword={setPassword}
showPasswordReset={showPasswordReset}
/>
) : (
<ForgotPasswordForm //animated.div
onPasswordResetSubmit={onPasswordResetSubmit}
setShowForgotPassword={toggle}
/>
)
)}
</div>
I made a simple example, you can check it out here