Как обслуживать статическую страницу + реагировать на приложение по тому же URL-адресу, как Twitter или FB?

Question

Можно ли отобразить статическую веб-страницу, если она не вошла в систему, но как-то загрузить SPA (ReactJS), если она вошла в систему раньше? Или эти «статические» веб-страницы являются лишь частью приложения?

Я имею в виду Twitter.com или Facebook.com и то, как они сразу загружают приложение, если вы выполнили вход ранее, или страницу по умолчанию, которая позволяет сканировать.

Является ли серверный рендеринг единственным ответом? Или есть более простое решение, так как большинство поисковых систем может сканировать JavaScript-сайт? Я не хочу использовать поддомен, такой как app.domain.com, если это возможно.

Идея: большинство уроков по ReactJS начинаются с довольно пустого index.html с div, в который должен отображаться React. Как насчет загрузочного html, который имеет фактическое содержимое, и если React обнаружит, что пользователь уже вошел в систему, то удалите статическое содержимое динамически? Это обычно делается? в чем недостаток?

Answer 1

Эту проблему можно решить, используя условие if else в реагировать js.

Надеюсь, вы получите информацию о пользователе от API.

Если API предоставит вам некоторую информацию о пользователе, вы можете сохранить эту информациюв состоянии и отобразите их.

и если это состояние равно нулю, вы можете отобразить статическую страницу.

Таким образом вы можете отобразить статическую страницу и реагировать на js на той же странице.

Надеюсь, что этот вопрос решит вашу проблему

Answer 2

Что я понимаю из вашего вопроса, так это: - Можем ли мы показать статический HTML-контент, когда пользователь не вошел в систему, и заменить его, когда пользователь вошел в систему или вошедший в систему пользователь снова посещает тот же веб-сайт.

Я отвечаю на вопрос, основанный на моем предположении, более простым способом.

В ReactJS все начинается с корневого элемента из реального DOM, который является <div id="root"></div>, вы можете найти это в index.html в общей папке.

Реагирует на рендеринг своего объекта JSX в корневой элемент реального DOM из метода ReactDOM.render().

Объект JSX представляет собой комбинацию html и java-скриптов, как показано ниже

<div> Hi, {"shreyans".toUpperCase()} </div>

Вы можете записать загрузочный HTML или любой статический HTML-контент в объект JSX и отобразить его в реальном DOM.

Поскольку JSX представляет собой комбинацию html и java-скрипта, вы можете написать логин для рендеринга разного контента на основе разных сценариев, как показано ниже: -

<div> { userIsLoggedIn ? "Welcome," + {userName} : "Please Login"} </div> 

На большем уровне переключаться между большим JSX-объектом или HTML-контентом, основанным на различных сценариях, примерно так: -

render()
{
  
    let signUp =
    <div>
      Please signup !!
      You extra content or a login form
    <div>
    
    let loggedIn =
    <div>
      Welcome User,
      You extra content or a list of menu
    </div>
    
    return(
      <React.Fragment>
       {
          this.state.isUserLoggedIn ?
          {signUp}:
          {loggedIn}
       }
       </React.Fragment>
      )
 }

Просто пройдите по следующей ссылке и получайте удовольствие от реакции React JS Official