9.5.2 dev server does not respond to requests

[tomaszrondio]

Bug report

Describe the bug

Server is unresponsive in dev mode. Requests are pending forever and get cancelled. In "production" mode it works fine.
Updated from 9.4.6
I use next-pwa

Screenshots

System information

• OS: macOS
• Browser chrome
• Version of Next.js: 9.5.2
• Version of Node.js: 10.15.0

[daveteu]

did u use asPath in your code? #16269

[tomaszrondio]

I do to check if menu item should be active or not.

  const router = useRouter();
  const indexOfQuestionMark = router.asPath.indexOf("?");
  const asPath = router.asPath.substring(
    0,
    indexOfQuestionMark !== -1 ? indexOfQuestionMark : router.asPath.length
  );
  const linkClassName = asPath === href ? "active" : "";

All Links are generated like this:
<Link href="/[...slug]" as={href}>
where href is a string from database. [...slug] catches all routes except homepage

[tomaszrondio]

funny thing is that sometimes it works and at some point it stops to work. Then if I restart the server it works again. There must be some bug that does not throw an error message.

[tomaszrondio]

I disabled next-pwa for dev environment and it looks that it helped.

[timneutkens]

Converting to a discussion as there is no reproduction so it's impossible to investigate.

[tomaszrondio]

I can provide whole repository. I also have issues with server side rendering in dev mode. Like it ignores getStaticProps and renders page without data. It looks that my setup is broken. I reinstalled dependencies but it didn't help. Need to figure it out or burn it :)

[tomaszrondio]

@timneutkens
ok so the thing is:
if U put this code into about.jsx file in pages folder and go to localhost:3000/about it will render on server side properly.
But if you put it into [...slug].jsx it won't. It will render component with empty props. Basically it does not wait for getStaticProps on server side. In the end it will render with props but on client side only.

import React from "react";

const Pages = (props) => {
  return <>{props.template}</>;
};

export async function getStaticProps(context) {
  return {
    props: { template: "SomeRandomValue" },
    revalidate: 1,
  };
}

export async function getStaticPaths() {
  return {
    paths: [],
    fallback: true,
  };
}

export default Pages;

[tomaszrondio]

oh man... I missed that in documentation. Now I get 404 which is an expected behaviour but kinda useless if [..slug] does not catch all routes anymore. If I understand correctly it is actually good that I set fallback to true. But it makes it impossible to develop AMP version of pages.

[tomaszrondio]

p.s. what is interesting as well is that it works for defined routes but not for "catch all routes".

[tomaszrondio]

background: I am working with CMS. All routes are dynamic. You never know what kind of content will be under a route. I have index.jsx for main page and [..slug].jsx for all other pages. Inside getStaticProps in [..slug].jsx I call the database to get kind of route and data for that route. It can be a section or article. From there I render proper component that displays the data. As I want to have AMP version of articles I need to know that given route is an article on server side.

[timneutkens]

Something that's still in development but you can try it out is fallback: 'unstable_blocking' which makes the first request a blocking server-side render which would allow you to ship AMP

[tomaszrondio]

great! That works as I need it.