react-dbmovies.github.io's Introduction

The Movie Database Clone

This is an open source The Movie Database clone build with Next.js 13. It is bootstrapped with create-next-app. You can track changes, ideas, and notes on the Trello board of the project.

Warning This project is still in development and is not ready for production use.

It uses new technologies (experimental-edge) which are subject to change and may break your application.

Tech Stack

Installation

1. Clone the repository

git clone [email protected]:denvudd/react-dbmovies.github.io.git

2. Install dependencies

npm install

3. Create .env file for your TMDB Api Key

4. Run the application

npm run dev

5. Run tests

npm run test

How do I deploy this?

Follow the deployment guides for Vercel and Netlify for more information.

License

No license.

Contributing

Contributions are welcome! Please open an issue if you have any questions or suggestions. Your contributions will be acknowledged.

react-dbmovies.github.io's People

Contributors

Stargazers

Watchers

react-dbmovies.github.io's Issues

Long initial page load with dynamic routing and getServerSideProps

When accessing the page with movie details the initial page load can take up to 7 seconds. After the first load, the page loads normally (around 2 seconds). This is not the expected behavior.

The page uses getServerSideProps, inside which a data request is initialized using RTK Query with the next redux wrapper. After fetching the data, the page component calls useQuery to subscribe to updates and retrieve the data (there is no second request because it was already initialized in getServerSideProps). The data is then passed to the MovieDetailsBlock component for display.

The reason for the slow initial load is currently unknown. During the page load, in DevTools Network, a simple JSON file can be seen in a pending state. After a minute, the page is presumably cleared from the cache, and upon subsequent visits, it loads slowly again, indicating that the slow load only occurs on the first load of the page component.

Current package.json:

{
  "name": "react-tbmovies",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@ant-design/icons": "^5.0.1",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.1.3",
    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    "ahooks": "^3.7.7",
    "antd": "^5.4.7",
    "classnames": "^2.3.2",
    "clipboard": "^2.0.11",
    "dayjs": "^1.11.7",
    "lodash.debounce": "^4.0.8",
    "next": "13.4.2",
    "next-redux-wrapper": "^8.1.0",
    "numeral": "^2.0.6",
    "react": "18.2.0",
    "react-content-loader": "^6.2.1",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "react-youtube": "^10.1.0",
    "sass": "^1.62.1",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@types/lodash.debounce": "^4.0.7",
    "@types/numeral": "^2.0.2"
  }
}

Page component [id].tsx:

import React from "react";
import DetailLayout from "@/layouts/DetailsLayout";
import MovieDetailsBlock from "@/components/MovieDetailsBlock/MovieDetailsBlock";
import {
  getMovieDetails,
  getRunningQueriesThunk,
} from "@/redux/api/movies/slice";
import { wrapper } from "@/redux/store";

interface MovieDetails {
  id: number;
}

export const getServerSideProps = wrapper.getServerSideProps(
  (store) => async (context) => {
    const { id } = context.query;

    if (typeof id === "string") {
      await store.dispatch(
        getMovieDetails.initiate({ id, params: "language=uk-UA&page=1" })
      );
    }

    await Promise.all(store.dispatch(getRunningQueriesThunk()));

    return {
      props: { id: id },
    };
  }
);

const MovideDetails: React.FC<MovieDetails> = ({ id }) => {
  const { data } = getMovieDetails.useQuery({
    id,
    params: "language=uk-UA&page=1",
  });

  return (
    <>
      <DetailLayout>
        {data && <MovieDetailsBlock id={id} data={data} />}
      </DetailLayout>
    </>
  );
};

export default MovideDetails;

DevTools Network during page load:

Pending state for JSON:
Fulfilled state for JSON and call information:

Relative links for this issue:
Super slow page load times in development environment
First call to getServerSideProps is slow
Slow initial page load with getServerSideProps

Recommend Projects

denvudd / react-dbmovies.github.io Goto Github PK