How can I get the all html code into view page source as I am developing a project in NEXT.js

Question

I am developing a project where i am using NEXT.js but there i am getting a issue like i am not getting the all html value in view page source. I think my problems in _app.js my code is below and screenshot also...

_app.js

import { useState } from "react";
import Router from "next/router";
import { Provider } from "react-redux";
import store from "../store/index";
import Layout from "../utils/Layout";
import Spinner from "../utils/Spinner";

import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/cardDesign-swiper.css";
import "../styles/dashboard.css";
import "../styles/index.css";


function MyApp({ Component, pageProps }) {
    const [loading, setLoading] = useState(true);

    Router.onRouteChangeStart = () => {
        setLoading(true);
    };
    Router.onRouteChangeComplete = () => {
        setLoading(false);
    };

    return (
        <>
            {loading && <Spinner width={120} />}
            {!loading && (
                <Provider store={store}>
                    <div suppressHydrationWarning>
                        {typeof window === "undefined" ? null : (
                            <Layout>
                                <Component {...pageProps} />
                            </Layout>
                        )}
                    </div>
                </Provider>
            )}
        </>
    );
}

export default MyApp;

In inspect element I am getting all actual value but not getting the value in view page source so please help me to achieve this thing.

What I am getting on view page source is...