sanity-io / next-sanity

Sanity.io toolkit for Next.js
https://www.sanity.io/
MIT License
760 stars 91 forks source link

Nextjs 13 and Sanity too slow (Pages & Data) #458

Closed KennStack01 closed 1 year ago

KennStack01 commented 1 year ago

I'm currently building a website, using Nextjs 13 (Frontend) and Sanity (Backend, CMS), following this tutorial by @Kapehe (DevRel). Here are the pain points:

1) Page loading takes longer. 2) On the first load, I can't render data (from the server, sanity-utils), only a blank page (data only appears on the second loading). 3) Navigation between pages takes forever and doesn't seem as fast as a Nextjs website should be. 4) Is there any way to have data and pages (navigation) load faster? 5) I wish it would work as fast as it used to work with getStaticProps (I need your help, please)

My package.json :

{
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@fontsource/inter": "^4.5.14",
    "@material-tailwind/react": "^2.0.1",
    "@next/font": "^13.4.4",
    "@portabletext/react": "^3.0.2",
    "@sanity/vision": "^3.12.0",
    "aos": "^2.3.4",
    "css-loader": "^6.8.1",
    "embla-carousel": "^8.0.0-rc07",
    "embla-carousel-react": "^8.0.0-rc07",
    "next": "^13.4.5",
    "next-sanity": "^4.3.3",
    "next-sanity-image": "^6.0.0",
    "nextjs-toploader": "^1.4.2",
    "pure-react-carousel": "^1.30.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^4.7.1",
    "react-portable-text": "^0.6.0",
    "react-share": "^4.4.1",
    "sanity": "^3.12.0",
    "style-loader": "^3.3.3",
    "styled-components": "^5.3.11"
  },
  "devDependencies": {
    "@types/aos": "^3.0.4",
    "@types/node": "18.11.3",
    "@types/react": "18.0.21",
    "@types/react-dom": "18.0.6",
    "@types/react-share": "^4.0.0",
    "@types/react-slick": "^0.23.10",
    "autoprefixer": "^10.4.12",
    "postcss": "^8.4.24",
    "tailwindcss": "^3.2.1",
    "typescript": "4.8.4"
  }
}

My next.config.js :

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,

  swcMinify: false,

  images: {
    domains: ["cdn.sanity.io"],
  },
};

Following the same tutorial, I'm having the slowest website I ever built. Any help?

liunice commented 1 year ago

Many people are talking about the performance issue of Nextjs 13, look at this: https://github.com/vercel/next.js/issues/48748